<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        @keyup.enter.native="handleFilter"
        clearable
        size="small"
        style="width: 200px;"
        class="filter-item"
        placeholder="商品编码"
        v-model="filters['goodsNo']"
      ></el-input>
      <el-input
        @keyup.enter.native="handleFilter"
        clearable
        size="small"
        style="width: 200px;"
        class="filter-item"
        placeholder="商品名称"
        v-model="filters['skuTitle']"
      ></el-input>
      <el-date-picker
        v-model="filters.startTime"
        size="small"
        format="yyyy-MM-dd"
        :clearable="true"
        value-format="yyyy-MM-dd"
        align="right"
        type="date"
        placeholder="选择开始日期"
        :picker-options="pickerOptions1"
      ></el-date-picker>
      <el-date-picker
        v-model="filters.endTime"
        size="small"
        format="yyyy-MM-dd"
        :clearable="true"
        value-format="yyyy-MM-dd"
        align="right"
        type="date"
        placeholder="选择结束日期"
        :picker-options="pickerOptions1"
      ></el-date-picker>
      <el-button
        class="filter-item"
        type="primary"
        size="small"
        v-waves
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        class="filter-item"
        v-if="~accessable.indexOf('goods:sku_history_export')"
        type="primary"
        size="small"
        v-waves
        icon="el-icon-document"
        @click="exportExcelFile"
      >导出</el-button>
    </div>
    <el-table
      size="smamedium"
      :data="list"
      :height="tableHeight"
      :fit="true"
      @sort-change="sortChange"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border=""
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" type="index" label="商品ID" width="80" fixed="left">
        <template slot-scope="scope">
          <span>{{scope.row.goodsId}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="cover" align="center" label="封面" width="200" fixed="left">
        <template slot-scope="scope">
          <img :src="scope.row.cover|absUrl" alt="" class="avatar">
        </template>
      </el-table-column>
      <el-table-column prop="title" align="center" label="商品名称" width="160" fixed="left">
        <template slot-scope="scope">
          <el-tag size="mini" type="danger" v-if="scope.row.tjTag">{{scope.row.tjTag}}</el-tag>
          <div>{{scope.row.title}}</div>
          <div class="sale-props">{{scope.row.saleProps|salePropsFormat}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="goodsNo" align="center" label="商品编码">
        <template slot-scope="scope">
          <span>{{scope.row.goodsNo}}</span>
        </template>
      </el-table-column>
      <!--

      <el-table-column prop="providerName" align="center" label="供应商">
        <template slot-scope="scope">
          <span>{{scope.row.providerName||'中油BP'}}</span>
        </template>
      </el-table-column>-->
      <el-table-column prop="marketPrice" align="center" label="市场价(元)">
        <template slot-scope="scope">
          <span>{{scope.row.marketPrice}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" align="center" label="微信价(元)">
        <template slot-scope="scope">
          <span>{{scope.row.price}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="points" align="center" label="积分数(个)">
        <template slot-scope="scope">
          <span>{{scope.row.points}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="stock" align="center" label="库存">
        <template slot-scope="scope">
          <span>{{scope.row.stock}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="stock" align="center" label="预警库存">
        <template slot-scope="scope">
          <span>{{scope.row.alertStock}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background=""
        @size-change="sizeChange"
        @current-change="loadData"
        :current-page.sync="filters.page"
        :page-sizes="[10,20,30,50]"
        :page-size="filters.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import categoryCascaderVue from '../../components/categoryCascader.vue'

import { paymentTypes, auditStatus, yesOrNoData } from '../../config/constants'

import { quillEditor, Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
import xdUploadVue from '../../components/xdUpload.vue'
import goodsRuleVue from '../../components/goodsRule.vue'

Quill.register('modules/ImageExtend', ImageExtend)
export default {
  components: {
    'category-cascader': categoryCascaderVue,
    quillEditor,
    'goods-rule': goodsRuleVue,
    'xd-upload': xdUploadVue
  },
  data () {
    return {
      auditStatus: auditStatus,
      tableHeight: 500,
      yesOrNoData,
      // typeCodeData:[],
      total: 0,
      hasNewGoodRules: false,
      uillUpdateImg: false,
      paymentTypes: paymentTypes,
      isAddingRule: false,
      skuStockList: [],

      stockDialogVisible: false,
      stockDialogData: {
        stock: 0,
        id: 0
      },
      stockDialogRules: {
        stock: [
          {
            required: true,
            message: '商品库存不能为空',
            trigger: 'change'
          }
        ]
      },
      goodsTagItems: [],
      editorOption: {
        placeholder: '在这里输入内容!',
        modules: {
          ImageExtend: {
            loading: true,
            name: 'file',
            action: '/util/upload',
            response: res => {
              return (
                'http://weixin-ostorage01.oss-cn-shenzhen.aliyuncs.com' +
                res.info
              )
            }
          },
          toolbar: {
            container: container,
            handlers: {
              image: function () {
                QuillWatch.emit(this.quill.id)
              }
            }
          }
        }
      },
      pickerOptions1: {
        shortcuts: [
          {
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      ruleDialogVisible: false,
      rules: {
        cover: [
          {
            required: true,
            message: '封面不能为空',
            trigger: 'change'
          }
        ],

        taxrate: [
          {
            required: true,
            message: '税率不能为空',
            trigger: 'change'
          }
        ],
        sort: [
          {
            required: true,
            message: '排序不能为空',
            trigger: 'change'
          }
        ],
        categoryPath: [
          {
            required: true,
            message: '所属分类不能为空',
            trigger: 'change'
          }
        ],
        isHot: [
          {
            required: true,
            message: '是否置顶不能为空',
            trigger: 'change'
          }
        ],
        // typeCode: [
        //   {
        //     required: true,
        //     message: "请选择小类",
        //     trigger: "change"
        //   }
        // ],

        imgSrcs: [
          {
            required: true,
            message: '请上传至少一张商品图片',
            trigger: 'change'
          }
        ],

        intro: [
          {
            required: true,
            message: '商品简介不能为空',
            trigger: 'change',
            max: 900
          }
        ],

        shopNo: [
          {
            required: true,
            message: '商家编码不能为空',
            trigger: 'change',
            max: 60
          }
        ],
        status: [
          {
            required: true,
            message: '销售状态未指定',
            trigger: 'change'
          }
        ],

        content: [
          {
            required: true,
            message: '商品详情不能为空',
            trigger: 'change'
          }
        ],

        brandId: [
          {
            required: true,
            message: '请选择品牌',
            trigger: 'change'
          }
        ]
      }
    }
  },
  filters: {
    saleProps (props) {
      if (typeof props === 'string') {
        if (props == '{}') {
          return '库存'
        }
        props = JSON.parse(props)
      }
      const rt = []
      Object.keys(props).forEach(el => {
        rt.push(el + ':' + props[el])
      })
      return rt.join(' ')
    }
  },

  created () {
    this.filters.limit = 10
    this.loadData()
    this.tableHeight = window.innerHeight - 280
  },
  methods: {
    handleFilter () {
      this.loadData()
    },
    sizeChange (p) {
      this.filters.limit = p
      this.loadData()
    },
    loadData () {
      this.$post('/admin/goods/sku_history/list', this.filters).then(data => {
        this.list = data.data
        this.total = data.totalRecord
      })
    },
    exportExcelFile () {
      const data = {
        title: '商品价格书',
        fields: JSON.stringify([
          {
            field: 'id',
            title: '商品ID'
          },
          {
            field: 'title',
            title: '商品名称'
          },
          {
            field: 'goodsNo',
            title: '商品编码'
          },
          {
            field: 'marketPrice',
            title: '市场价(元)'
          },
          {
            field: 'price',
            title: '微信价(元)'
          },
          {
            field: 'points',
            title: '积分价(个)'
          },
          {
            field: 'stock',
            title: '商品库存'
          },
          {
            field: 'alertStock',
            title: '警戒库存'
          }
        ])
      }
      Object.assign(data, this.filters)
      this.$post('/admin/goods/sku_history/export', data).then(data => {
        this.openWin(data)
      })
    }
  }
}
</script>
<style scoped>
.avatar {
  height: auto;
  display: block;
  margin: 0 auto;
  width: 100px;
}

.btns {
  padding-left: 15px;
}

.btns /deep/ button {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
